var SearchForm = function () {
  var template = /* html */ `
    <sys-common-search class="search-form" ref="commonSearch" :search="search" :response-filter-fun="getDropdownOption" :dropdown-props="dropdownProps"
      :search-field="searchField" label-width="75px" input-width="180px">
      <template slot="prepend">
        <el-form-item label="车间-部门">
          <el-cascader filterable clearable class="search-input" :options="deptWorkshopList" v-model="search.deptWorkshop"
            :props="{children:'workshops',checkStrictly:true}" separator="-"></el-cascader>
        </el-form-item>
      </template>
      <template slot="append">
        <el-form-item label="看板显示">
          <el-select clearable class="search-input" v-model="search.showInBoard">
            <el-option v-for="item in showInBoardList" :key="'item_'+item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </sys-common-search>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },

      equipments: {
        type: Array,
        required: true
      },

      deptWorkshopList: {
        type: Array,
        required: true
      }
    },

    watch: {
      equipments: function () {
        if (this.$refs['commonSearch']) {
          this.$refs['commonSearch'].resetDropdownData();
        }
      }
    },

    data: function () {
      return {
        dropdownProps: {
          equipmentNo: '设备编号',
          manufacturer: '生产厂家',
          internetThingsCard: '物联网卡',
          upperComputer: '上位机',
          deviceType: '设备类型',
          energyNo: '使用电表',
          flowNo: '使用气表'
        },
        showInBoardList: [{
          value: 1,
          label: "看板显示"
        }, {
          value: 0,
          label: "看板不显示"
        }],
        searchField: ['equipmentNo', 'manufacturer', 'internetThingsCard', 'upperComputer',
          'deviceType', 'energyNo', 'flowNo'
        ]
      };
    },

    methods: {
      getDropdownOption: function () {
        var self = this;
        return new Promise(function (resole, reject) {
          var equipments = self.equipments;
          resole(equipments);
        });
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
